import { Component, OnInit, ViewChild, ElementRef, Renderer2, OnChanges, Input } from '@angular/core';
import { NzModalService, NzMessageService } from 'ng-zorro-antd';
import { DomSanitizer } from '@angular/platform-browser'; // 引入DomSanitizer服务
import { Router } from '@angular/router';
import { VideoService } from '@src/app/services/project/smart-site/video.service';

declare var ckplayer: any;

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {

  constructor(

    private message: NzMessageService,
    public videoService: VideoService,

    private router: Router,
    // private router: Router
  ) {
    this.init();
  }

  public projectName: string = JSON.parse(window.localStorage.getItem('project')).name;
  public smartSiteId: string = JSON.parse(window.localStorage.getItem('project')).smartSiteId;
  public videoList: Array<any> = [];
  public playUrl: Array<any> = [];
  public player: any;
  public isChrome = false;
  browserInfo = '';
  @ViewChild('videoBody', { static: true }) public videoBody: ElementRef;

  routeToSurvey() {
    const projectId = JSON.parse(window.localStorage.getItem('project')).id;
    this.router.navigate([`/inner/project/${projectId}/survey`], { queryParams: { info: 'project' } });
  }
  // 初始化数据
  init() {
    // 获取视频列表
    // debugger;
    this.videoService.QueryProjectsVideoList({ projectId: this.smartSiteId }).then((result) => {
      if (result.success) {
        this.videoList = result.result.items;
      } else {
        this.message.warning(result.console.error.message);
      }
    });

  }

  videoPlay(item) {
    const videoObject = {
      playerID: 'v' + item.id, // 播放器id，不能以数字开头
      container: '#' + item.id, // “#”代表容器的ID，“.”或“”代表容器的class
      variable: 'player', // 该属性必需设置，值等于下面的new chplayer()的对象
      // html5m3u8: true,
      flashplayer: this.isChrome, // 设置成true则强制使用flashplayer

      poster: item.coverUrl, // 视频封面
      video: item.playUrl, // 视频地址
    };
    let player = new ckplayer(videoObject);
    this.player = player;

  }



  public getBrowserInfo() {
    this.browserInfo = this.myBrowser();
  }

  public myBrowser() {
    let userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
    // console.log(userAgent)
    let isOpera = userAgent.indexOf('Opera') > -1;
    if (isOpera) {
      return 'Opera'
    } // 判断是否Opera浏览器
    if (userAgent.indexOf('Firefox') > -1) {
      return 'Firefox';
    } // 判断是否Firefox浏览器
    if (userAgent.indexOf('Chrome') > -1) {
      this.isChrome = true;
      return 'Chrome';
    }
    if (userAgent.indexOf('Safari') > -1) {
      return 'Safari';
    } // 判断是否Safari浏览器
    if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) {
      return 'IE';
    } // 判断是否IE浏览器
  }


  ngOnInit() {
    this.myBrowser()
    // if (this.myBrowser() === 'Chrome') {
    //   this.isChrome = true;
    // }
  }

  // 钩子里循环初始化播放器
  // tslint:disable-next-line: use-life-cycle-interface
  ngAfterViewInit() {
    setTimeout(() => {
      console.log(this.videoList);
      this.videoList.forEach(item => {
        item.isPlay = false;
        this.videoPlay(item);
      });
    }, 200);

  }
  // tslint:disable-next-line: use-life-cycle-interface
  ngOnDestroy() {
    this.videoList = [];
  }
}
